<template>
  <el-dialog
    top="80px"
    :visible.sync="isVisible"
    :title="title"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-container>
      <el-main :style="{ 'max-height': maxHeightDialog }">
        <t-detail
          v-if="detailList.length != 0"
          :list="detailList"
          :is-title="true"
          :title="'基本信息'"
          :is-card-border="true"
        >
          <template
            v-if="item.value != ''"
            slot="planImgUrl"
            slot-scope="{ item }"
          >
            <img
              :src="item.value"
              style="width: 146px; height: 146px; display: block"
              @click="handleImgCardPreview(item.value)"
            />

            <!-- {{ item.value | datefmt('YYYY-MM-DD') }} -->
          </template>
        </t-detail>

        <el-dialog :visible.sync="imgDialogVisible">
          <img
            width="100%"
            :src="dialogImageUrl"
            alt=""
            style="padding: 20px"
          />
        </el-dialog>
      </el-main>
      <el-footer>
        <el-button
          size="medium"
          icon="el-icon-close"
          style="width: 120px"
          @click="isVisible = false"
        >
          关闭
        </el-button>
      </el-footer>
    </el-container>
  </el-dialog>
</template>

<script>
import TDetail from '@/components/TDetail'
import dataDetailMixins from '@/mixins/data-detail-mixins'
import GridManageApi from '@/api/grid-manage'
export default {
  name: 'GridDetail',
  components: {
    TDetail,
  },
  mixins: [dataDetailMixins],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    params: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      detailList: this.getDetailList('start'),
      imgDialogVisible: false,
      dialogImageUrl: '',
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.toClose()
      },
    },
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      this.detailObj = { ...this.params.item }
      this.detailList = this.getDetailList('')
      this.getImg()
    },
    getDetailList(type) {
      // const list = [
      //   [
      //     { text: '网格id', value: type === 'start' ? '' : this.detailObj.id },
      //     {
      //       text: '网格guid',
      //       value: type === 'start' ? '' : this.detailObj.guid
      //     }
      //   ],

      //   [
      //     {
      //       text: '上级网格',
      //       value: type === 'start' ? '' : this.detailObj.parentFullPathText
      //     },
      //     {
      //       text: '',
      //       value: ''
      //     }
      //   ],
      //   [
      //     {
      //       text: '网格名称',
      //       value: type === 'start' ? '' : this.detailObj.name
      //     },
      //     {
      //       text: '网格全路径',
      //       value: type === 'start' ? '' : this.detailObj.fullPathText
      //     }
      //   ],

      //   [
      //     {
      //       text: '网格等级',
      //       value: type === 'start' ? '' : this.detailObj.level
      //     },
      //     {
      //       text: '网格经纬度',
      //       value:
      //         type === 'start'
      //           ? ''
      //           : this.detailObj.longitude && this.detailObj.longitude !== ''
      //             ? this.detailObj.longitude + ',' + this.detailObj.latitude
      //             : ''
      //     }
      //   ],
      //   [
      //     {
      //       text: '所属省',
      //       value: type === 'start' ? '' : this.detailObj.province
      //     },
      //     {
      //       text: '所属地市',
      //       value: type === 'start' ? '' : this.detailObj.city
      //     }
      //   ],

      //   [
      //     {
      //       text: '所属区县',
      //       value: type === 'start' ? '' : this.detailObj.county
      //     },
      //     {
      //       text: '',
      //       value: ''
      //     }
      //   ],
      //   [
      //     {
      //       text: '排序',
      //       value: type === 'start' ? '' : this.detailObj.orderNum
      //     },
      //     {
      //       text: '',
      //       value: ''
      //     }
      //   ],
      //   [
      //     {
      //       text: '创建时间',
      //       value: type === 'start' ? '' : this.detailObj.createTime
      //     },
      //     {
      //       text: '',
      //       value: ''
      //     }
      //   ]
      // ]

      const list = [
        [{ text: '网格id', value: type === 'start' ? '' : this.detailObj.id }],
        [
          {
            text: '网格guid',
            value: type === 'start' ? '' : this.detailObj.guid,
          },
        ],

        [
          {
            text: '上级网格',
            value: type === 'start' ? '' : this.detailObj.parentFullPathText,
          },
        ],
        [
          {
            text: '网格名称',
            value: type === 'start' ? '' : this.detailObj.name,
          },
        ],
        [
          {
            text: '网格全路径',
            value: type === 'start' ? '' : this.detailObj.fullPathText,
          },
        ],

        [
          {
            text: '网格等级',
            value: type === 'start' ? '' : this.detailObj.level,
          },
        ],
        [
          {
            text: '网格经纬度',
            value:
              type === 'start'
                ? ''
                : this.detailObj.longitude && this.detailObj.longitude !== ''
                ? this.detailObj.longitude + ',' + this.detailObj.latitude
                : '',
          },
        ],

        [
          {
            text: '所属省',
            value: type === 'start' ? '' : this.detailObj.province,
          },
        ],
        [
          {
            text: '所属地市',
            value: type === 'start' ? '' : this.detailObj.city,
          },
        ],

        [
          {
            text: '所属区县',
            value: type === 'start' ? '' : this.detailObj.county,
          },
        ],
        [
          {
            text: '排序',
            value: type === 'start' ? '' : this.detailObj.orderNum,
          },
        ],
        [
          {
            text: '创建时间',
            value: type === 'start' ? '' : this.detailObj.createTime,
          },
        ],
      ]
      return list
    },
    getImg() {
      GridManageApi.getGridDetail(this.params.item.guid).then((ret) => {
        this.imageId = ret.data.imageId
        this.planImgUrl = ret.data.files
          ? ret.data.files.url
          : ''
        const arr = [
          {
            text: '网格2D平面图',
            value: this.planImgUrl,
            slotName: 'planImgUrl',
          },
        ]
        this.detailList.push(arr)
      })
    },
    handleImgCardPreview(url) {
      this.dialogImageUrl = url
      this.imgDialogVisible = true
    },
    toClose() {
      this.$emit('close')
    },
  },
}
</script>

<style scoped lang="scss">
@import '../../../../../styles/part-custom';
.detail-div {
  border: 1px solid #d5dbe0;
  border-right: 0px solid #d5dbe0;
  border-bottom: 0px solid #d5dbe0;
}
.detail-row {
  border-bottom: 1px solid #d5dbe0;
  display: flex;
}
.detail-label {
  width: 20%;
  border-right: 1px solid #d5dbe0;
  padding: 4px;
  text-align: right;
  color: #525e8c;
  background: #f9fcfd;
}
.detail-value {
  width: 30%;
  border-right: 1px solid #d5dbe0;
  padding: 4px;
}
</style>
